import React, { FC, useEffect, useState } from 'react'
import ProCard from '@ant-design/pro-card'
import { Tabs, Button, message } from 'antd'
import { getFunctionList } from '@/services/function'
import DetailFunctionForm from '@pages/ControllerView/components/FunctionConfig/DetailFunctionForm'
import { PlusOutlined } from '@ant-design/icons'
import './style.less'
const { TabPane } = Tabs

interface FunctionConfigListProps {
  fileId:string,
  projectId:string,
}

const FunctionConfigList: FC<FunctionConfigListProps> = (props) => {

  const { fileId,projectId } = props;
  const [funList,setFunList] = useState<any>([]);
  const [activeKey,setActiveKey] = useState<any>(' ');

  useEffect(() => {
    getData();
  },[fileId])

  const getData = () => {
    getFunctionList({cid:fileId}).then(res => {
      if(res.code === 10000) {
        setFunList(res.data);
        setActiveKey(`${res.data[0]?.id}`)
      }
    })
  }

  const addTabFun = () => {

    if (funList[0]?.id == 0) {
      message.warn('只能同时添加一个方法！')
      return
    }

    const data = {id:'0',fun_name:'New Function'}
    funList.unshift(data);
    setFunList(funList)
    setActiveKey('0')
  }

  return (
    <div>
      <Tabs onChange={(val) => setActiveKey(val)} activeKey={activeKey} tabPosition='left' style={{ height: funList.length > 0 ? 450 : '100%' }}>
        {funList.map((res:any) => (
          <TabPane tab={res.fun_name} key={res.id}>
            <DetailFunctionForm again={getData} projectId={projectId} fileId={fileId} funId={res.id} />
          </TabPane>
        ))}
      </Tabs>
      <div style={{textAlign:'center'}}>
      <Button style={{width:'50%',marginBottom:70,backgroundColor:'#6BA9F12E'}} type="dashed" onClick={addTabFun} block icon={<PlusOutlined />}>
        新建方法
      </Button>
      </div>
    </div>
  )
}

export default FunctionConfigList;
